<template>
  <div class="m-2 p-3" v-enter-helper="[initData, listQuery]">
    <el-card>
      <div slot="header" class="clearfix">
        <el-form :model="listQuery" inline>
          <el-form-item label="日期范围">
            <el-date-picker
              v-model="dateList"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              format="yyyy-MM-dd HH:mm:ss"
              value-format="yyyy-MM-dd HH:mm:ss"
              @change="handlePanelChange">
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="deBounceWrap(handleSearch)"
            >搜索
            </el-button
            >
            <el-button type="primary" @click="deBounceWrap(handleExport)"
            >导出
            </el-button
            >
          </el-form-item>
        </el-form>
      </div>

      <el-table :data="tableData" border v-loading="loading">
        <el-table-column label="序号" type="index" :index="indexMethod" prop="number"></el-table-column>
        <el-table-column label="流水单号" prop="order_sn"></el-table-column>
        <el-table-column label="时间" prop="created_at"></el-table-column>
        <el-table-column label="操作内容" prop="desc"></el-table-column>
        <el-table-column label="M豆数量" prop="change"></el-table-column>
        <el-table-column label="剩余M豆数量" prop="balance"></el-table-column>
      </el-table>
      <cus-pagination
        v-show="total > 0"
        :limit.sync="listQuery.perPage"
        :page.sync="listQuery.page"
        :total="total"
        @pagination="initData"
      />
    </el-card>
  </div>
</template>

<script>
import { walletLog, walletLogExport } from '@/api/sys/anchorList'

export default {
  name: "financialStatements",
  data() {
    return {
      loading: false,
      listQuery: {
        start_time: undefined,
        end_time: undefined,
        page: 1,
        perPage: 10,
        user_id: undefined,
        type: 1
      },
      total: 0,
      dateList: [],
      tableData: [],
    };
  },
  created() {
    this.listQuery.user_id = this.$route.query.user_id
    this.listQuery.type = this.$route.query.type
    this.initData();
  },
  methods: {
    indexMethod(index) {
			return this.total - (this.listQuery.page-1) * this.listQuery.perPage - index
		},
    initData() {
      this.loading = true;
      for (let key in this.listQuery) {
          this.listQuery[key] = this.listQuery[key] === '' ? undefined : this.listQuery[key]
      }
      walletLog(this.listQuery)
        .then(res => {
          const {
            data: {list, meta}
          } = res;
          this.tableData = list;
          this.total = meta.total;
          this.listQuery.page = meta.page
        })
        .finally(() => (this.loading = false));
    },
    handleSearch() {
      // Solve the problem of parsing failure caused by the binding value becoming null when the date component is empty
      let [start_time, end_time] = this.dateList || [];
      this.listQuery.start_time = start_time
      this.listQuery.end_time = end_time
      this.initData(this.listQuery);
      this.initData(this.listQuery);
    },
    handleCurrentChange(page) {
      this.listQuery.page = page;
      this.initData(this.listQuery);
    },
    // 日期 picker 值变化的时候触发
    handlePanelChange(date) {
      if (date === null) {
        this.listQuery.start_time = undefined;
        this.listQuery.end_time = undefined;
      }
    },
    //
    handleExport() {
      let [start_time, end_time] = this.dateList || [];
      if (start_time)
        this.listQuery.start_time = parseInt(
          `${new Date(start_time).valueOf() / 1e3}`
        );
      if (end_time)
        this.listQuery.end_time = parseInt(
          `${new Date(end_time).valueOf() / 1e3}`
        );

      walletLogExport(this.listQuery).then(res => {
        location.href = res.data.download_url;
      });
    }
  }
};
</script>

<style scoped></style>
